<template>
  <div class="client-container">
    <div class="client-top">
      <h3>客户管理</h3>
      <div class="search-box">
        <el-row>
          <el-col :span="6">
            <div class="grid-content">
              姓名/手机号：
              <el-input v-model="keyWords" placeholder="请输入姓名/手机号"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              状态：
              <el-select v-model="tagId" placeholder="请选择状态">
                <el-option
                  v-for="item in tagList"
                  :key="item.datDictDtlCd"
                  :label="item.datDictDtlNm"
                  :value="item.datDictDtlCd">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleClear">清除搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="client-content">
      <el-table
        :data="clientList"
        style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <el-table-column prop="brokerName" label="经纪人"></el-table-column>
        <el-table-column prop="followName" label="跟进人"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="pageIndex"
          @current-change="currentChange"
          :page-count="pageCount">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      width="40%">
      <div class="pop-box">
        <div class="grid-content">
          <p>姓名：</p> {{realName}}
        </div>
        <div class="grid-content">
          <p>经纪人：</p>{{brokerName}}
        </div>
        <div class="grid-content">
          <p>跟进人：</p>
          <el-input v-model="followName" placeholder="请输入跟进人"></el-input>
        </div>
        <div class="grid-content">
          <p>关注楼盘：</p>{{houseName}}
        </div>
        <div class="grid-content">
          <p>手机号：</p>{{telephone}}
        </div>
        <div class="grid-content">
          <p>住址：</p>{{address}}
        </div>
        <div class="grid-content">
          <p>标签：</p><span v-for="(item,index) in tagsCustom" :key="index">{{item.tag}}</span>
        </div>
        <div class="grid-content">
          <p>客户状态：</p>{{statusName}}
        </div>
        <div class="grid-content">
          <p>收入：</p>{{earning}}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleCheck">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
  import apiDataFilter from "../../../utils/apiDataFilter";

  export default {
    name: "client",
    data() {
      return {
        keyWords: '',
        phone: '',
        clientList: [],
        pageCount: null,
        pageIndex: 1,
        tagList: [],
        tagId: '',
        dialogVisible: false,
        realName: '',
        followName: '',
        telephone: '',
        houseName: '',
        address: '',
        tagsCustom: [],
        statusName: '',
        earning: '',
        brokerName: ''

      }
    },
    methods: {
      getCustomer() {
        let param = {page: this.pageIndex, pageSize: 10};
        this.keyWords ? Object.assign(param, {keyWords: this.keyWords}) : '';
        this.tagId ? Object.assign(param, {status: this.tagId}) : '';
        apiDataFilter.request({
          apiPath: 'customer.search',
          data: param,
          method: 'post',
          successCallback: (res) => {
            this.clientList = res.data.list;
            this.pageCount = Math.ceil(res.data.totalCount / 10);
          }
        })
      },
      /*获取标签*/
      getTag() {
        let param = {page: 1, pageSize: 10000, datDictCd: 105};
        apiDataFilter.request({
          apiPath: 'tag.tagTypeDict',
          method: 'post',
          data: param,
          successCallback: (res) => {
            this.tagList = res.data.list;
          }
        })
      },
      handleSearch() {
        this.getCustomer();
      },
      handleClear() {
        this.keyWords = '';
        this.tagId = '';
        this.getCustomer();
      },
      currentChange(val) {
        this.pageIndex = val;
        this.getCustomer();
      },
      /*编辑*/
      handleEdit(index, row) {
        this.dialogVisible = true;
        this.realName = row.realName;
        this.followName = row.followName;
        this.telephone = row.telephone;
        this.houseName = row.houseName;
        this.address = row.address;
        this.tagsCustom = row.tags;
        this.statusName = row.statusName
        this.earning = row.earning
        this.brokerName = row.brokerName;
      },
      handleCheck() {
        if (!this.realName || !this.followName || !this.telephone || !this.address) {
          this.$message.error('请完善信息');
          return;
        } else {

        }
      },
      handleSubmit() {
        let param = {
          followName: this.followName, realName: this.realName,
          telephone: this.telephone, address: this.address
        }
      }
    },
    created() {
      this.getCustomer();
      this.getTag();
    }
  }
</script>

<style scoped lang='less'>
  @import "client.less";
</style>
